<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人中心</title>
	<!-- 导入样式 -->
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/headandfter.css" />
    <link rel="stylesheet" type="text/css" href="../css/personal.css"/>
    <link rel="stylesheet" type="text/css" href="../css/lanrenzhijia.css" />
    <script src="../js/jquery.min.js"></script>
    <script src="../js/header.js"></script>
</head>

<body>
<header>
  <div class="header">
    <div class="top">
      <div class="top-info fixed">
      	<div class="right fixed" style="*max-width:420px; position:relative;">
          <div class="message-content right"  style="position:relative; display:inline-block; height:40px;">
            <a href="#" class="message-info">
              <span class="message-nums">6</span>
            </a>
            <div class="h-MessageInfo">
              <p class="icon-tringle2"></p>
              <div class="h-M-Content">
                <p class="h-M-Title"><a href="javascript:void(0);" class="NowMeg" style="border-right:solid 1px #e6e6e6;">消息</a><a href="javascript:void(0);" style="width:189px;">动态</a></p>
                <ul class="h-Tab">
                  <li class="MsgContent">
                    <div class="Msg-txt">暂无新消息</div>
                    <p class="Msg-more"><a href="#">查看更多消息>></a></p>
                  </li>
                  <li class="cdtContent" style="display:none;">
                    <div class="Msg-txt">暂无新动态</div>
                    <p class="Msg-more"><a href="#">查看更多动态>></a></p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!--End 消息内容-->
          <div class="user-info right fixed">
            <div class="user-img left"><img src="../images/headandfter/user-img.png" /></div>
            <div class="user-name left">
              <a href="#">小豆女王</a>
              <span class="icon-tringle1"></span>
            </div>
            <div class="user-set">
              <p></p>
              <div class="us-Content"></div>
            </div><!--用户操作 未果-->
          </div>
        </div>
        <!--End 用户-->
        <div class="top-nav left">
          <a href="#" class="f-home">番石榴首页</a>
          <span class="vertical-gray1"></span>
          <a href="#" class="f-news">新闻站</a>
          <span class="vertical-gray1"></span>
          <a href="#" class="f-active">亲子活动站</a>
          <span class="vertical-gray1"></span>
          <a href="#" class="f-shop">辣妈购物站</a>
          <span class="vertical-gray1"></span>
          <a href="#" class="f-lt">论坛</a>
        </div>
      </div>
    </div>
   <!--End top-->
    <div class="header-banner fixed">
      <div class="search-info right">
        <div class="search-content">
          <input type="text" name="search" value="" />
          <a href="javascript:void(0);" class="icon-search"></a>
        </div>
        <p class="search-tag">
          <span>热词：</span>
          <a href="#">韩剧</a>
          <a href="#">发烧</a>
          <a href="#">吊瓶</a>
          <a href="#">安全</a>
        </p>
      </div>
      <div class="cms-logo left">
        <img src="../images/headandfter/cms-logo.png" />
        <span class="vertical-gray1" style="height:60px; margin:0 30px; margin-bottom:6px;"></span>
      </div>
      <div class="header-nav left">
        <a href="#" class="nav-home">首页</a>
        <a href="#" class="nav-image">图片</a>
        <a href="#" class="nav-dkh">大咖号</a>
        <a href="#" class="nav-mtrz">媒体入驻</a>
        <a href="#" class="nav-lt">论坛</a>
        <a href="#" class="nav-app">APP</a>
      </div>
    </div>
  </div>
</header>
<!--End header-->
<section>
    <!--begin 主体--->
    <div class="main_body">
	<!--begin 头部-->
	<div class="head">
	    <!--begin 背景-->
	    <div class="background">
        <img src="../images/personal/bannerbg.jpg" class="bannerbg" width="100%" style="min-height:230px;"/>
		<!--begin 右侧天气日期--->
        <div style="width:1160px; margin:0 auto; position:absolute; left:50%; margin-left:-580px; z-index:3; top:0;">
			<div class="weather_date">
		  <!--日期-->
		    <ul>
			<li>
			    <span class="date">16</span>
			</li>
			<li>
			    <span class="month">Jan</span><br/>
			    <span class="year">2015</span> 
			</li>
		    </ul>
		    <!--天气--->
		    <div class="weather">
			<img src="../images/personal/weather_img1.png" />
			28/36℃
		    </div>
        </div>
		</div>
	    </div>
	    <!--end 背景-->
	    <!--begin 用户信息-->
	    <div class="userInfo">
		<div class="info_left">
		    <ul>
			<li>
			    <!--being 用户头像-->
			    <img src="../images/personal/userhead_img1.png" class="userhead"/>
			    <!--being 用户头像-->
			   
			</li>
			<li class="info">
			    <img src="../images/personal/rz.png"/>
			    <a class="username" href="#">飞过海井冈<i class="icon-read"></i></a>
			    <!---个性签名-->
			    <p class="sign">
				虽然已经过了立春，进入春季。但最近骤冷骤热的天气，实在让人难以招架。对于抵抗力较弱的宝宝来说，就更容易生病了。一些传染病，例如
				一些传染病
			    </p>
			</li>
			<li class="modify">
			    <a href="javascript:void(0);" class="moditf_a">修改</a>
			</li>
		    </ul>
		</div>
	    </div>
	    <!--end 用户信息与头像-->
	</div>
	<!--end 头部-->
	
	<!--begin 我的订阅与收藏-->
	<div class="myFavourite">
	    <ul class="tabbtn" id="move-animate-left">
		<li class="current"><a href="#/">我的收藏</a></li>
		<li><a href="#">我的订阅</a></li>
	    </ul><!--tabbtn end-->
	<div class="demo">
	    <div class="tabcon" id="leftcon">
		<div class="subbox">
		    <!--begin 我的收藏-->
		    <div class="sublist">
			<!--第一条收藏-->
			<div class="collection">
			    <!--begin 时间-->
			    <ul class="collect">
				<li>
				    <span>2015-11-06 <img src="../images/personal/date_img1.png"/></span><br/>
				    <span>2  <img src="../images/personal/star_img1.png"/></span><br/>
				    <span>52 <img src="../images/personal/eye_img1.png"/></span><br/>
				    <span>52 <img src="../images/personal/comment_img1.png"/></span>
				</li>
			    </ul>
			    <!--end 时间-->
			    <!--begin 内容-->
			    <div class="coll_onn">
                <span class="criclebg"></span>
				<h1>
				    <img src="../images/personal/title_img1.png"/>
				    父母与孩子个关系，出生前已经决定
				</h1>
				<p>
				    每一个人所散发出的特定品质的频率，像磁铁般地吸引着类似的频率，以及具有共同业力的人。一个在频率上既不超凡入胜，也不颓废，又是社
				    每一个人所散发出的特定品质的频率，像磁铁般地吸引着类似的频率，以及具有共同业力的人。一个在频率上既不超凡入胜，也不颓废，又是社
				    每一个人所散发出的特定品质的频率，像磁铁般地吸引着类似的频率，以及具有共同业力的人。一个在频率上既不超凡入胜，也不颓废，又是社
				</p>
			    </div>
			    <!--end 内容-->
			</div>
			<!--第二条收藏-->
			<div class="collection">
			    <!--begin 时间-->
			    <ul class="collect">
				<li>
				    <span>2015-11-06 <img src="../images/personal/date_img1.png"/></span><br/>
				    <span>2  <img src="../images/personal/star_img1.png"/></span><br/>
				    <span>52 <img src="../images/personal/eye_img1.png"/></span><br/>
				    <span>52 <img src="../images/personal/comment_img1.png"/></span>
				</li>
			    </ul>
			    <!--end 时间-->
			    <!--begin 内容-->
			    <div class="coll_onn">
                <span class="criclebg"></span>
				<h1>
				    <img src="../images/personal/title_img1.png"/>
				    走过大地的亲子旅游
				</h1>
				<p>
				    <img src="../images/personal/door_img1.png"/>
				    <img src="../images/personal/island_img1.png"/>
				    <img src="../images/personal/party_img1.png"/>
				    <img src="../images/personal/omit_img1.png"/>
				</p>
			    </div>
			    <!--end 内容-->
			</div>
		    </div>
		    <!--end 我的收藏-->
		    
		    <!--begin 我的订阅-->
		    <div class="sublist">
			<!--订阅块1-->
			<div class="subscribe">
			    <img src="../images/personal/dingyue_img1.png"/>
			    <label class="subname">互助工艺团</label>
			    <a class="cancle" href="#"><span>-</span>取消订阅</a>
			    <ul>
				<li>
				    <span class="left">•</span>
				    <a href="#" target="_blank">山西僧人9年收养百名孤儿年收养百名孤儿年收养百名孤儿 自办"孤儿院”</a>
				    <span class="time">24/03</span>
				</li>
				<li>
				    <span class="left">•</span>
				    <a href="#" target="_blank">山西僧人9年收养百名孤儿 自办"孤儿院”</a>
				    <span class="time">24/03</span>
				</li>
				<li>
				    <span class="left">•</span>
				    <a href="#" target="_blank">山西僧人9年收养百名孤儿 自办"孤儿院”</a>
				    <span class="time">24/03</span>
				</li>
				<li>
				    <span class="left">•</span>
				    <a href="#" target="_blank">山西僧人9年收养百名孤儿 自办"孤儿院”</a>
				    <span class="time">24/03</span>
				</li>
				<li>
				    <span class="left">•</span>
				    <a href="#" target="_blank">山西僧人9年收养百名孤儿 自办"孤儿院”</a>
				    <span class="time">24/03</span>
				</li>
			    </ul>
			</div>
			<!--订阅块2-->
			<div class="subscribe subscribe2">
			    <img src="../images/personal/dingyue_img2.png"/>
			    <label class="subname">大嘴鳄宝贝乐园</label>
			    <a class="cancle" href="#"><span>-</span>取消订阅</a>
			    <ul>
				<li>
				    <span class="left">•</span>
				    <a href="#" target="_blank"> MATERIAL DESIGN实战！FEEDLY创始人再聊改版... </a>
				    <span class="time">24/03</span>
				</li>
				<li>
				    <span class="left">•</span>
				    <a href="#" target="_blank">MATERIAL DESIGN实战！FEEDLY创始人再聊改版...</a>
				    <span class="time">24/03</span>
				</li>
				<li>
				    <span class="left">•</span>
				    <a href="#" target="_blank">MATERIAL DESIGN实战！FEEDLY创始人再聊改版...</a>
				    <span class="time">24/03</span>
				</li>
				<li>
				    <span class="left">•</span>
				    <a href="#" target="_blank">MATERIAL DESIGN实战！FEEDLY创始人再聊改版...</a>
				    <span class="time">24/03</span>
				</li>
				<li>
				    <span class="left">•</span>
				    <a href="#" target="_blank">MATERIAL DESIGN实战！FEEDLY创始人再聊改版...</a>
				    <span class="time">24/03</span>
				</li>
			    </ul>
			</div>
		    </div>
		    <!--begin 我的订阅-->
		</div><!--tabcon end-->
	    </div>
	</div>
        <div class="download" style="position:absolute;top:86px;right: 0px;">
            <img src="../images/personal/zaoka_img1.png"/>
        </div>
	</div>
	<!--end 我的订阅与收藏-->
    </div>
    <!--end 主体--->

</section>
<!--End section-->
<footer>
  <div class="footer footer-show-bg">
    <div class="f-banner fixed">
      <div class="bbsh left">
        <p style="padding-bottom:30px;"><img src="../images/headandfter/bbshimg.png" /></p>
        <p><img src="../images/headandfter/fan16-ewm.jpg" /></p>
      </div>
      <div class="hot-pd left">
        <p class="hot-title">热门频道</p>
        <div class="hot-link fixed">
          <div>
            <p><a href="#">新闻</a></p>
            <p><a href="#">国内</a></p>
            <p><a href="#">评论</a></p>
            <p><a href="#">国际</a></p>
            <p><a href="#">探索</a></p>
            <p><a href="#">社会</a></p>
            <p><a href="#">军事</a></p>
          </div>
          <div>
            <p><a href="#">图片</a></p>
            <p><a href="#">体育</a></p>
            <p><a href="#">NBA</a></p>
            <p><a href="#">CBA</a></p>
            <p><a href="#">综合</a></p>
            <p><a href="#">中超</a></p>
            <p><a href="#">足球</a></p>
          </div>
          <div>
            <p><a href="#">英超</a></p>
            <p><a href="#">西甲</a></p>
            <p><a href="#">意甲</a></p>
            <p><a href="#">娱乐</a></p>
            <p><a href="#">明星</a></p>
            <p><a href="#">图片</a></p>
            <p><a href="#">电影</a></p>
          </div>
          <div>
            <p><a href="#">财经</a></p>
            <p><a href="#">音乐</a></p>
            <p><a href="#">资料库</a></p>
            <p><a href="#">股票</a></p>
            <p><a href="#">产经</a></p>
            <p><a href="#">新股</a></p>
            <p><a href="#">金融</a></p>
          </div>
          <div>
            <p><a href="#">基金</a></p>
            <p><a href="#">商业</a></p>
            <p><a href="#">评论</a></p>
            <p><a href="#">国际</a></p>
            <p><a href="#">探索</a></p>
            <p><a href="#">社会</a></p>
          </div>
        </div>
      </div>
      <div class="call-alls left">
        <p class="hot-title">联系我们</p>
        <p class="alls1">商务合作：huangjiasheng@fan16.cn</p>
        <p class="alls1">广告发布：deloo@fan16.cn</p>
        <p class="alls1">投诉建议：service@fa</p>
        <div class="linkbg">
          <a href="#" class="xinlang"></a>
          <a href="#" class="tengxun"></a>
          <a href="#" class="zhandian"></a>
          <a href="#" class="douban"></a>
        </div>
      </div>
    </div>
    <div class="f-bottom">
      <p>Copyright©　2013-2015 fan16.cn,AllRights Reserved 粤ICP备 12093882 号-1 版权所有：广州赢酷通讯技术有限公司</p>
    </div>
  </div>
</footer>
<!--End footer-->
<!--Start Alert-->
<div class="AlertContainer AlertCgName" style="display:none;">
  <div class="AlertContent">
    <div class="AlertTitle">
      <p class="fixed"><i class="icon-exit right"></i></p>
      <p>修改你的昵称</p>
      <p><img src="../images/personal/icon-user.png" /></p>
    </div>
    <div class="AlertBanner">
      <p class="readName"><a href="javascirpt:void(0);" class="changeName right">确定</a><input type="text" value="" name="userName" /></p>
      <p style="color:#2c2c2c;">重要提示：</p>
      <p>网络上的任何人都可以看见你的昵称。</p>
      <p>如果在此处更改你的姓名，则所有【番石榴】产品都会改变。</p>
    </div>
  </div>
</div><!--End 修改名字-->
<div class="AlertContainer AlertCgImg" style="display:none;">
  <div class="AlertContent">
    <div class="AlertTitle">
      <p class="headertxt fixed">修改你的头像<i class="icon-exit right"></i></p>
    </div>
    <div class="AlertBanner" style="padding-right:40px;">
      <div class="imginfo"></div>
      <input type="file" style="display:none" />
      <a href="javascript:void(0);" class="OpenImgBtn">从电脑选择图片</a>
      <p style="color:#b2b2b2; font-family:'宋体'; text-align:center;">图片尺寸应大于200*200</p>
    </div>
  </div>
</div><!--End 修改头像-->
<!--End Alert-->
</body>
<script type="text/javascript" src="../js/jquery.tabso_yeso.js"></script>
<script language="javascript">
$(function(){
	//左右滑动选项卡切换
	$("#move-animate-left").tabso({
		cntSelect:"#leftcon",
		tabEvent:"mouseover",
		tabStyle:"move-animate",
		direction : "left"
	});
	//遮罩层
	$("<div id='div_brg_keleyi_com'></div>").css({
	  position:'absolute',
	  top:0,
	  left:0,
	  backgroundColor:"#000000",
	  opacity:0.4,
	  zIndex:1000
	  })
	  .height($(document).height())
	  .width($(document).width()).hide().appendTo("body")
	  
	  //需要遮罩的时候
	function show_keleyi_com() {
		$("#div_brg_keleyi_com").show();
	}
	  
	$(".icon-exit").click(function () {
	  //取消遮罩的时候
		$("#div_brg_keleyi_com").hide();
		$(".AlertContainer").hide();
	});
	$(".userhead").click(function(){
		show_keleyi_com();
		$(".AlertCgImg").show();
	})
	$(".username").click(function(){
		show_keleyi_com();
		$(".AlertCgName").show();
	})
	  
	$(".moditf_a").click(function(){
	    //alert("fg");
	    if ($(this).text()=="修改") {
			$(".sign").css("border","1px solid #e7e7e7");
			$(".moditf_a").text("确认修改");
			$(".sign").attr("contenteditable",true);
			$(".sign").focus();
	    }else{
			$(".sign").css("border","1px solid #f8f8f8");
			$(".moditf_a").text("修改");
			$(".sign").attr("contenteditable",false);
	    }
	});
})
</script>
</html>
